<template>
 <div class="flex" id="MessageBack">
  <div id="MessageBox" class="flex position">
      <!-- 导航 -->
      <MessageNavi id="MessageNavi" class="flex"/>
      <!-- 导航内容 -->
      <NaviContent id="NaviContent"/>
      <!-- 内容 -->
      <MessageContent id="MessageContent"/>
      <!-- 抽屉 -->
      <MeessageDrawer v-if="DrawerState > 0"/>
   </div>
 </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import MessageContent from './MessageContent/MessageContent.vue'
import MeessageDrawer from './MessageDrawer/MeessageDrawer.vue'
import MessageNavi from './MessageNavi/MessageNavi.vue'
import NaviContent from './NaviContent/NaviContent.vue'
  export default 
  {
    components: { MessageNavi, MessageContent, NaviContent, MeessageDrawer},
     name :'', 
     computed:{
        ...mapState('Chat',['DrawerState'])
     },
     methods: {
       ...mapMutations('Tool',['SETNAVIGATION'])
     },
     created() {
         
     },
  }
</script>
<style scoped lang='less'>
#MessageBack{
    width:  calc(100vw );
    margin-top: 60px;
    height: calc( 100vh - 60px);
    overflow: hidden; 
}
// 手机
@media screen and (max-width: 600px) {
   div#MessageBox{
       height: 100vh;
       border-radius: 0;
       width: 100%;
   }
   div#MessageBack#MessageBack{
       position: relative;
       z-index: 1000;
       margin-top: 0;
       height:100vh;
   }
 }
 //盒子位置
 .position{
    width: 80vw;
    min-width: 300px;
    max-width: 1200px;

    height: 90%;
    box-shadow:var(--BoxShadow);
 }
 //信息盒子大小
#MessageBox{
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: 15px;
  position: relative;
}


//导航
#MessageNavi{
  width: 80px;
  min-width: 80px;
  height: 100%;
  padding: 20px 5px;
  box-sizing: border-box;
  text-align: center;
  border-right: 1px solid var(--GeneralBackColor-half);
  position: relative;
  background: var(--GeneralBackColor);
  
  flex-direction: column;
  flex-wrap: nowrap;
}
//导航内容
#NaviContent{
  width: 320px;
  min-width: 320px;
  height: 100%;
  padding: 20px 10px;
  box-sizing: border-box;
  background: var(--GeneralBackColor-half);

}
//信息内容
#MessageContent{
  width: 100%;
  height: 100%;
  min-width: 0px;
  overflow: hidden;
  background: var(--BackColor);
}
</style>